<script lang="ts" setup>
import {isDark} from '@/utils/is'
import {useAppStore} from '@/store/modules/app'
import {useDesign} from '@/hooks/web/useDesign'
import {CACHE_KEY, useCache} from '@/hooks/web/useCache'
import routerSearch from '@/components/RouterSearch/index.vue'

defineOptions({name: 'APP'})

let safariSize = "Source Han Sans CN, PingFang SC, 苹方-简, 苹方";
let otherSize = "Source Han Sans CN";

const body: any = document.querySelector("body")
if ((/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent))) {
  body.style.fontFamily = safariSize;
  console.log("safari")
} else {
  body.style.fontFamily = otherSize;
  console.log("other")
}

const {getPrefixCls} = useDesign()
const prefixCls = getPrefixCls('app')
const appStore = useAppStore()
const currentSize = computed(() => appStore.getCurrentSize)
const greyMode = computed(() => appStore.getGreyMode)
const {wsCache} = useCache()

// 根据浏览器当前主题设置系统主题色
const setDefaultTheme = () => {
  let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
  if (isDarkTheme === null) {
    isDarkTheme = isDark()
  }
  appStore.setIsDark(isDarkTheme)
}
setDefaultTheme()


</script>
<template>
	<ConfigGlobal :size="currentSize">
		<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''"/>
		<routerSearch/>
	</ConfigGlobal>
</template>
<style lang="scss">
$prefix-cls: #{$namespace}-app;
$whElCom: 40px;

.el-pager {
  .number {
    width: 33px !important;
    height: 33px !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid #BFBFBF !important;
  }
  
  .is-active {
    background: #0D0D0D !important;
  }
}

.btn-prev {
  width: 33px !important;
  height: 33px !important;
  background: #fff !important;
  border-radius: 8px !important;
  border: 1px solid #BFBFBF !important;
}

.btn-next {
  @extend .btn-prev;
}


.driver-popover-navigation-btns {
  justify-content: space-between !important;
}

.driver-popover-footer button {
  text-shadow: none !important;
  width: 96px !important;
  height: 36px !important;
  text-align: center !important;
}

.driver-popover-prev-btn {
  background: #FFFFFF !important;
  border-radius: 0px 0px 0px 0px !important;
  border: 1px solid #EEEEEE !important;
}

.driver-popover-next-btn {
  background-color: #0D0D0D !important;
  color: #FFFFFF !important;
}

.postedByNameBox {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
  .names {
    margin-right: 6px;
    white-space: nowrap;
  }
}

.postedByNameStyle {
  .el-input__wrapper {
    background: transparent !important;
  }
  
  .el-input {
    width: 134px !important;
    height: 28px !important;
  }
}

.el-card {
  border: none !important;
}

.el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before {
  display: none !important;
}

.el-table__cell {
  border: none !important;
}

.el-dialog__footer .el-button--default {
  width: 96px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #EEEEEE;
  color: #0D0D0D;
}

.el-dialog__footer .el-button--primary {
  width: 96px;
  height: 36px;
  background: #0D0D0D;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #EEEEEE;
  color: #fff;
}


.el-form-item--default .el-form-item__label {
  height: $whElCom !important;
  line-height: $whElCom !important;
}

.el-form-item .el-form-item__label {
  &:before {
    display: none !important;
  }
}

.el-form-item--large .el-form-item__error {
  padding-top: 0px !important;
  padding-left: 16px;
}

.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
  background-color: #0d0d0d;
}

.el-message-box__btns {
  margin-top: 20px;
  
  .el-button--primary {
    background-color: #0d0d0d;
    border-color: #0d0d0d;
  }
  
  .el-button {
    width: 96px;
    height: 36px;
  }
}

.el-message-box__status.el-message-box-icon--warning {
  color: #ff5656;
}

.el-table__header {
  .el-table__cell {
    background-color: #f6f6f6 !important;
    
    .cell {
      color: #0d0d0d;
    }
  }
}

.model-button {
  .el-button {
    width: 87px;
    height: 40px;
  }
}

.el-form-item--default .el-form-item__label {
  height: var(--module-height);
  line-height: var(--module-height);
}

.el-form-item__content {
  .el-date-editor {
    height: var(--module-height);
  }
  
  .el-select {
    height: var(--module-height);
    
    .el-select__wrapper {
      height: inherit;
    }
  }
  
  .el-input {
    height: var(--module-height);
  }
}

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  @extend .size;
  
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  
  #app {
    @extend .size;
  }
}

.#{$prefix-cls}-grey-mode {
  filter: grayscale(100%);
}
</style>
